<template lang="html">
  <div>
  <mheader></mheader>
  <div class="collegeMenu">
    <div class="collegeMain">
      <div class="collegeTop">
        <el-row class="collegeBread"><b>当前位置：</b>MBA院校搜索结果</el-row>
        <el-row class="collegeSelect">
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item>
              <el-select v-model="form.college" placeholder="请选择院校" size="small" class="formSelect" @change="collegeChange">
                <el-option :label="i.name" :value="i.id" v-for="(i, index) in collegeList" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="form.secience" placeholder="请选择学位" size="small" class="formSelect" @change="secienceChange">
                <el-option label="请选择学位" value=""></el-option>
                <el-option :label="i.name" :value="i.id" v-for="(i, index) in secienceList" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="form.class" placeholder="请选择班型" size="small" class="formSelect">
                <el-option label="请选择班型" value=""></el-option>
                <el-option :label="i.name" :value="i.id" v-for="(i, index) in classList" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" class="formSubmit" @click="search">确认</el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <el-row class="collegeDownTop">
          <h3 class="collegeTitle">{{ schoolName1 }}</h3>
          <a :href="schoolobj.introducePics" class="collegeDownload" v-if="schoolobj.introducePics!=null && schoolobj.introducePics!=''">{{ schoolobj.introduceText }}<img src="../assets/images/download.png"></a>
        </el-row>
      </div>
    </div>
    <div class="collegeMbaMenu" v-if="map.degreeList!=''">
      <div class="collegeMbaList">
        <div class="collegeMbaSingle" v-for="(i, index) in map.degreeList" :key="index">
          <h3 class="collegeSingleTitle">{{ i.degreeName }}</h3>
          <div class="collegeSingleCenter">
            <div class="collegeSingleFirst">
              <span>总学费：</span>
              <h5>￥{{ i.totalMoney }}</h5>
            </div>
            <div class="collegeSingleSecond">
              <span>一期学费：</span>
              <h5>￥{{ i.firstTermMoney }}</h5>
            </div>
            <div class="collegeSingleThird">
              <span>最高奖学金：</span>
              <h5 class="collegeSingleMoney">{{ i.topReward?('￥'+i.topReward):'--' }}</h5>
            </div>
          </div>
          <div class="collegeSingleBottom">
            <span>最近入学日期：</span>
            <h5>{{ i.enrollDate?i.enrollDate:'--' }}</h5>
            <span class="collegeSingleDate">最近报名截止日期：</span>
            <h5>{{ i.deadlineDate?i.deadlineDate:'--' }}</h5>
          </div>
          <router-link to="/stuEnroll">
            <!-- <a href="http://140.143.63.54/mba/index.html#/"> -->
              <p class="collegeSingleTopBtn">立即报名</p>
            <!-- </a> -->
          </router-link>
          <!-- <a href="http://140.143.63.54/mba/index.html#/" class="collegeSingleTopBtn">立即报名</a> -->
          <a href="javascript:;" class="collegeSingleBotBtn" @click="seeSec(i)">了解详情</a>
        </div>
        <router-link to="/stuEnroll">
            <!-- <a href="http://140.143.63.54/mba/index.html#/"> -->
              <p class="collegeMbaApply">立即申请该院校</p>
            <!-- </a> -->
        </router-link>
        <!-- <a href="http://140.143.63.54/mba/index.html#/" class="collegeMbaApply">立即申请该院校></a> -->
      </div>
    </div>
    <div class="collegeMoreMenu">
      <div class="collegeMorelist">
        <h3 class="collegeMoreTitle">更多院校</h3>
        <el-row class="collegeMoreUl" :gutter="20">
          <el-col :span="8" v-for="(i, index) in map.otherSchools" :key="index">
            <div class="collegeMoreLi" @click="changeCollege(i)">
              <span>{{ i.name }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
  <!-- <mfooter></mfooter> -->
  </div>
</template>

<script>
import mheader from '@/components/mheader'
// import mfooter from '@/components/mfooter'
import { getSchoolResultInfo } from '@/api'
export default {
  name: 'college',
  components: {
    mheader
    // mfooter
  },
  data () {
    return {
      form: {
        college: '',
        secience: '',
        class: ''
      },
      collegeList: [],
      secienceList: [],
      classList: [],
      schoolName: '',
      schoolobj: '',
      map: '',
      schoolName1: '', // 默认院校
      fromIndex: false
    }
  },
  async created () {
    // window.scrollTo(0, 0)
    if (this.$route.query.id === '') {
      this.schoolName1 = this.schoolName = '美国贝翰文大学'
      sessionStorage.schoolName = this.schoolName
      sessionStorage.removeItem('collegeList')
    } else {
      // 用session存储顶部搜索状态
      if (sessionStorage.schoolName && sessionStorage.schoolName !== '') {
        this.schoolName1 = sessionStorage.schoolName
        this.schoolName = sessionStorage.schoolName
        this.form.college = Number(sessionStorage.collegeId)
        this.collegeList = sessionStorage.collegeList
      } else {
        this.schoolName1 = this.schoolName = '美国贝翰文大学'
        sessionStorage.schoolName = this.schoolName
      }
    }
    await this.loadCollege()
  },
  methods: {
    loadCollege (v) {
      this.schoolName1 = this.schoolName = sessionStorage.schoolName
      let params = {
        schoolName: this.schoolName1
      }
      if (v === 1) {
        params['schoolId'] = this.form.college
      }
      getSchoolResultInfo(params).then(res => {
        if (v !== 1) {
          this.collegeList = res.data.map.schoolResultVoList
          for (let i = 0; i < this.collegeList.length; i++) {
            if (this.collegeList[i].name === '美国贝翰文大学' && v !== 1 && !sessionStorage.collegeList) {
              this.form.college = this.collegeList[i].id
              sessionStorage.collegeId = this.collegeList[i].id
            }
          }
          sessionStorage.collegeList = JSON.stringify(this.collegeList)
          sessionStorage.otherSchools = JSON.stringify(res.data.map.otherSchools)
          sessionStorage.schoolobj = JSON.stringify(res.data.map.school)
        }
        this.schoolobj = res.data.map.school
        this.map = res.data.map
        let degree = {}
        for (let i = 0; i < this.collegeList.length; i++) {
          if (this.collegeList[i].id === this.form.college) {
            degree = this.collegeList[i]
          }
        }
        this.secienceList = degree.degreeResultVoList
        if (this.$route.query.id && this.$route.query.id !== '' && !this.fromIndex) {
          this.fromIndex = true
          this.schoolName1 = this.schoolName = sessionStorage.schoolName = this.$route.query.name
          this.form.college = Number(this.$route.query.id)
          this.$nextTick(() => {
            this.loadCollege(1)
          })
        }
      })
    },
    collegeChange () {
      this.form.secience = ''
      for (let i = 0; i < this.collegeList.length; i++) {
        if (this.collegeList[i].id === this.form.college) {
          this.schoolName = this.collegeList[i].name
          this.secienceList = this.collegeList[i].degreeResultVoList
        }
      }
    },
    secienceChange () {
      this.form.class = ''
      for (let i = 0; i < this.secienceList.length; i++) {
        if (this.secienceList[i].id === this.form.secience) {
          this.classList = this.secienceList[i].classTypeResultVoList
        }
      }
    },
    search () {
      if (this.form.college === '') {
        this.$message.error('请选择院校名称')
      } else {
        sessionStorage.schoolName = this.schoolName
        this.schoolName1 = this.schoolName
        sessionStorage.collegeId = this.form.college
        if (this.form.college !== '' && this.form.secience === '' && this.form.class === '') { // 只调院校
          this.loadCollege(1)
        } else if (this.form.college !== '' && this.form.secience !== '' && this.form.class === '') { // 只调学位
          this.$router.push({ path: 'secience/' + this.form.college + '/' + this.form.secience })
        } else if (this.form.college !== '' && this.form.secience !== '' && this.form.class !== '') { // 只调班型
          this.$router.push({ path: 'class/' + this.form.college + '/' + this.form.secience + '/' + this.form.class })
        }
      }
    },
    changeCollege (row) {
      this.form.college = row.id
      this.loadCollege(1)
      this.schoolName = row.name
      this.schoolName1 = row.name
      // window.scrollTo(0, 0)
    },
    seeSec (row) {
      this.$router.push({ path: 'secience/' + this.form.college + '/' + row.degreeId })
    }
  }
}
</script>

<style lang="less" scoped>
@import url('../style/base');
.collegeMenu {
  width: 100%;
  overflow: hidden;
  .collegeMain {
    width: 905px;
    overflow: hidden;
    margin: 0 auto;
    .collegeTop {
      width: 100%;
      background: #fff;
    }
    .collegeBread {
      margin-top: 19px;
      b {
        font-weight: bold;
      }
    }
    .collegeSelect {
      margin-top: 49px
    }
    .formSelect {
      width: 235px;
      margin-right: 10px;
    }
    .formSubmit {
      width: 106px;
      background: #A51C30;
      border-color: #A51C30;
    }
    .formSubmit:hover {
      opacity: .7
    }
    .collegeDownTop {
      position: relative;
      padding-bottom: 30px;
    }
    .collegeTitle {
      margin-top: 37px;
      font-size: 20px;
      font-family: 'STSongti-SC-Black'
    }
    .collegeDownload {
      font-size: 16px;
      color: #D96873;
      position: absolute;
      right: 0;
      top: 44px;
      vertical-align: middle;
      img {
        width: 23px;
        height: 23px;
        vertical-align: middle;
        margin-left: 10px;
      }
    }
  }
  .collegeMbaMenu {
    width: 100%;
    overflow: hidden;
    background: #F8F6F6;
    .collegeMbaList {
      width: 1000px;
      overflow: hidden;
      margin: 0 auto;
      .collegeMbaSingle {
        width: 905px;
        margin-top: 57px;
        background: #fff;
        height: 189px;
        border-radius: 8px;
        box-shadow: 0 2px 10px 0 rgba(150, 115, 115, 0.12);
        margin: 57px auto 57px auto;
        padding-top: 20px;
        position: relative;
        .collegeSingleTitle {
          font-size: 18px;
          margin-left: 40px;
          font-weight: bold;
        }
        .collegeSingleCenter {
          margin-top: 48px;
          margin-left: 40px;
          color: #4B4B4B;
          span {
            display: inline-block;
            font-size: 14px;
            vertical-align: middle;
          }
          h5 {
            display: inline-block;
            font-size: 18px;
            font-weight: bold;
            vertical-align: middle;
          }
          .collegeSingleFirst {
            width: 212px;
            display: inline-block;
          }
          .collegeSingleSecond {
            width: 220px;
            display: inline-block;
          }
          .collegeSingleThird {
            display: inline-block;
          }
          .collegeSingleMoney {
            font-size: 26px;
            color: #A51C30;
          }
        }
        .collegeSingleBottom {
          margin-top: 18px;
          border-top: 1px solid rgba(151, 151, 151, .15);
          width: 618px;
          padding-top: 18px;
          margin-left: 40px;
          span {
            font-size: 14px;
            color: #4B4B4B;
            display: inline-block;
            vertical-align: middle;
          }
          h5 {
            color: #A51C30;
            font-size: 18px;
            display: inline-block;
            vertical-align: middle;
          }
          .collegeSingleDate {
            margin-left: 19px;
          }
        }
        .collegeSingleTopBtn {
          width: 129px;
          height: 41px;
          line-height: 41px;
          border-radius: 4px;
          background: #A51C30;
          color: #fff;
          font-size: 18px;
          text-align: center;
          border: 0;
          outline: 0;
          position: absolute;
          top: 76px;
          right: 33px;
        }
        .collegeSingleTopBtn:hover {
          opacity: .7
        }
        .collegeSingleBotBtn {
          width: 129px;
          height: 41px;
          line-height: 41px;
          border-radius: 4px;
          background: #F6E2D0;
          color: #BD6B77;
          font-size: 18px;
          text-align: center;
          border: 0;
          outline: 0;
          position: absolute;
          bottom: 22px;
          right: 33px;
        }
        .collegeSingleBotBtn:hover {
          opacity: .7
        }
      }
    }
    .collegeMbaApply {
      margin: 13px auto 73px auto;
      width: 403px;
      height: 82px;
      line-height: 82px;
      border-radius: 4px;
      background: #A51C30;
      text-align: center;
      color: #fff;
      font-size: 36px;
      font-family: 'STSongti-SC-Black';
      display: block;
    }
    .collegeMbaApply:hover {
      opacity: .8
    }
  }
  .collegeMoreMenu {
    width: 100%;
    overflow: hidden;
    background: #fff;
    .collegeMorelist {
      width: 905px;
      margin: 45px auto 98px auto;
      position: relative;
      .collegeRed {
        width: 30px;
        height: 3px;
        background: #941A2B;
        position: absolute;
        top: 400px;
        left: 50%;
        margin-left: -15px;
      }
      .collegeMoreTitle {
        font-size: 20px;
        font-family: 'STSongti-SC-Black';
      }
      .collegeMoreUl {
        width: 100%;
        overflow: hidden;
        margin-top: 26px;
      }
      .collegeMoreLi {
        width: 290px;
        height: 290px;
        background-size: cover !important;
        margin-top: 10px;
        text-align: center;
        color: #fff;
        font-size: 24px;
        cursor: pointer;
        transition: .5s;
        background: grey;
        overflow: hidden;
        word-break: break-all;
        box-sizing: border-box;
        line-height: 34px;
        padding: 0 30px;
        .displayCenter;
      }
      .collegeMoreLi:hover {
        opacity: .8
      }
      .collegeMoreLine {
        width: 100%;
        margin-top: 120px;
        overflow: hidden;
      }
    }
  }
}
</style>
